<template>
  <div class="right_container">
    <div class="cockpitMainModulesTitle">全周期数据专项统计</div>
    <div class="main_content">
      <div class="btn">
        <el-dropdown trigger="click">
          <el-button type="primary" size="small" :round="true" class="choose_box" style="background-color: rgb(117, 194, 255);">
            <span class="btn_text">{{ topBtnContent }}</span>
            <i class="el-icon-caret-bottom"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item @click.native="()=>{getItemCardData();setBtn(1,'全量')}">全量</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2023);setBtn(1,'2023')}">2023</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2022);setBtn(1,'2022')}">2022</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2021);setBtn(1,'2021')}">2021</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2020);setBtn(1,'2020')}">2020</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2019);setBtn(1,'2019')}">2019</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2018);setBtn(1,'2018')}">2018</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2017);setBtn(1,'2017')}">2017</el-dropdown-item>
            <el-dropdown-item @click.native="()=>{getItemCardData(2016);setBtn(1,'2016')}">2016</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <div class="info_card">
        <div class="card_item" v-for="(item, index) in itemCardData" :key="index">
          <div class="item_title">
            <span>{{ item.title }}</span>
          </div>
          <div class="item_content">
            <span class="number">{{ item.number }}</span>
            <span class="unit" v-html="item.unit"></span>
          </div>
        </div>
      </div>
      <div class="target_card">
        <div class="target_card_title">
          <span>重点业务指标</span>
        </div>
        <div class="target_card_content">
          <div class="target_show_box" v-for="(item, index) in targetCardData" :key="index">
            <div class="show_box_title">
              {{ item.title }}
            </div>
            <div class="show_box_content top_box" :class="item.class">
              <div class="inner">
                <span class="show_number" v-html="item.content[0].number"></span><span class="show_number unit" v-html="item.content[0].unit"></span>
                <span class="show_desc">{{ item.content[0].description }}</span>
              </div>
            </div>
            <div class="show_box_content" :class="item.class">
              <div class="inner">
                <span class="show_number" v-html="item.content[1].number"></span><span class="show_number unit" v-html="item.content[1].unit"></span>
                <span class="show_desc">{{ item.content[1].description }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="center_chart">
        <div class="chart_title">
          <img src="../../assets/cockpitImg/left_title.png">
          <span class="content">工业建设年度趋势</span>
          <img src="../../assets/cockpitImg/right_title.png">
        </div>
        <div class="chart_content">
          <div class="left_chart" ref="leftChart"></div>
          <div class="right_chart" ref="rightChart"></div>
        </div>
      </div>
      <div class="bottom_chart">
        <div class="chart_title">
          <img src="../../assets/cockpitImg/left_title.png">
          <span class="content">工业产业分布趋势</span>
          <img src="../../assets/cockpitImg/right_title.png">
        </div>
        <div class="btn">
          <el-dropdown trigger="click">
            <el-button type="primary" size="small" round class="choose_box" style="background-color: rgb(117, 194, 255);">
              <span class="btn_text">{{ bottomBtnContent }}</span>
              <i class="el-icon-caret-bottom"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="()=>{getRightBottomData();setBtn(2,'全量')}">全量</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2023);setBtn(2,'2023')}">2023</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2022);setBtn(2,'2022')}">2022</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2021);setBtn(2,'2021')}">2021</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2020);setBtn(2,'2020')}">2020</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2019);setBtn(2,'2019')}">2019</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2018);setBtn(2,'2018')}">2018</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2017);setBtn(2,'2017')}">2017</el-dropdown-item>
              <el-dropdown-item @click.native="()=>{getRightBottomData(2016);setBtn(2,'2016')}">2016</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </div>
        <div class="charts_switch_box">
          <div class="switch_btns" @click="changeBtnValue(0)" :class="{'btn_active':btnValue[0]}">产业类别</div>
          <div class="switch_btns" @click="changeBtnValue(1)" :class="{'btn_active':btnValue[1]}">经济效益</div>
          <div class="switch_btns" @click="changeBtnValue(2)" :class="{'btn_active':btnValue[2]}">投资企业</div>
        </div>
        <div class="chart_content">
          <ChanYe v-if="btnValue[0]" :data="chanYeData"></ChanYe>
          <JingJi v-if="btnValue[1]" :data="jingJiData" :sum="jingJiSum"></JingJi>
          <TouZi v-if="btnValue[2]" :data="touZiData" :enterpriseNumber="enterpriseNumber" :registeredFunds="100"></TouZi>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetRightTopData, reqGetToken, reqGetRightCenterData, reqGetRightBottomData } from '@/api/data'
import * as echarts from 'echarts'
import JingJi from '@/components/jingji/index.vue'
import ChanYe from '@/components/chanye/index.vue'
import TouZi from '@/components/touzi/index.vue'
export default {
  components: {
    JingJi, ChanYe, TouZi
  },
  data() {
    return {
      itemCardData: [
        {
          title: '累计服务项目',
          number: 0,
          unit: '个',
        },
        {
          title: '累计办件量',
          number: 0,
          unit: '个',
        },
        {
          title: '服务工业用地',
          number: 0,
          unit: '万m&sup2;',
        },
        {
          title: '新增工业厂房',
          number: 0,
          unit: '万m&sup2;',
        },
        {
          title: '验收投产产房',
          number: 0,
          unit: '万m&sup2;',
        },
      ],
      targetCardData: [
        {
          title: '用地证',
          class: 'green',
          content: [
            {
              number: 0,
              unit: '个',
              description: '发证数量',
            },
            {
              number: 0,
              unit: '万m&sup2;',
              description: '用地面积',
            },
          ]
        },
        {
          title: '建工证',
          class: 'blue',
          content: [
            {
              number: 0,
              unit: '个',
              description: '发证数量',
            },
            {
              number: 0,
              unit: '万m&sup2;',
              description: '建筑面积',
            },
          ]
        },
        {
          title: '招投标备案',
          class: 'purple',
          content: [
            {
              number: 0,
              unit: '个',
              description: '备案数量',
            },
            {
              number: 0,
              unit: '万元',
              description: '合同额',
            },
          ]
        },
        {
          title: '环评及排污',
          class: 'green',
          content: [
            {
              number: 0,
              unit: '个',
              description: '环评批复数量',
            },
            {
              number: 0,
              unit: '个',
              description: '排污许可数量',
            },
          ]
        },
        {
          title: '施工许可证',
          class: 'blue',
          content: [
            {
              number: 0,
              unit: '个',
              description: '发证数量',
            },
            {
              number: 0,
              unit: '万m&sup2;',
              description: '建设规模',
            },
          ]
        },
        {
          title: '竣工验收',
          class: 'purple',
          content: [
            {
              number: 0,
              unit: '个',
              description: '发证数量',
            },
            {
              number: 0,
              unit: '万m&sup2;',
              description: '建筑面积',
            },
          ]
        },
      ],
      data1: [0, 0, 0, 0, 0],
      data2: [0, 0, 0, 0, 0],
      xData: ['2019年', '2020年', '2021年', '2022年', '2023年'],
      btnValue: [true, false, false],
      chanYeData:[],
      jingJiData:[],
      jingJiSum:0,
      enterpriseNumber:0,
      touZiData:[],
      topBtnContent:'全量',
      bottomBtnContent:'全量',
    }
  },
  methods: {
    initCenterLeftCharts() {
      const myLeftChartDom = this.$refs.leftChart
      const myLeftChart = echarts.init(myLeftChartDom)
      let option = {
        title: [
          {
            text: '项目量趋势',
            left: '3%',
            top: '5%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 15,
            },
          },
          {
            text: '单位:个',
            right: '10%',
            top: '6%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 14,
              fontWeight: 'normal',
            },
          },
        ],
        grid: {
          left: '17%',
          right: '10%',
          top: '30%',
          bottom: '10%',
        },
        backgroundColor: 'rgb(235, 246, 253)',
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          data: this.xData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            color: 'black',
            margin: 10, //刻度标签与轴线之间的距离。
            interval: 0,
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgb(212,234,239)',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'black',
            formatter: function (value) {
              return value;
            }
          }
        },
        series: [{
          type: 'pictorialBar',
          symbolSize: [15, 7.5],
          symbolOffset: [0, -3.75],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: 'rgb(86,224,225)',
          },
          data: this.data1,
        }, {
          type: 'pictorialBar',
          symbolSize: [15, 7.5],
          symbolOffset: [0, 3.75],
          z: 12,
          itemStyle: {
            color: 'rgb(126,154,227)',
          },
          data: this.data1,
        }, {
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(161,180,224,.8)' }, { offset: 1, color: 'rgba(70,177,252,.8)' }])
          },
          barWidth: 15,
          data: this.data1,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}', // 显示柱状图数据
            fontSize: 12,
            color: 'rgb(39,96,152)',
          },
        }]
      };
      myLeftChart.setOption(option)
      // myRightChart.setOption(option)
    },
    initCenterRightCharts() {
      const myRightChartDom = this.$refs.rightChart
      const myRightChart = echarts.init(myRightChartDom)
      let option = {
        title: [
          {
            text: '建设量趋势',
            left: '3%',
            top: '5%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 15,
            },
          },
          {
            text: '单位:万m{sup|2}',
            right: '10%',
            top: '6%',
            textStyle: {
              color: 'rgb(39, 96, 152)',
              fontSize: 14,
              fontWeight: 'normal',
              rich: {
                sup: {
                  verticalAlign: 'top', // 上标的垂直对齐方式
                  fontSize: 8, // 上标的字体大小
                },
              },
            },
          },
        ],
        grid: {
          left: '17%',
          right: '10%',
          top: '30%',
          bottom: '10%',
        },
        backgroundColor: 'rgb(235, 246, 253)',
        tooltip: {
          trigger: 'item',
        },
        xAxis: {
          data: this.xData,
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            fontSize: 12,
            color: 'black',
            margin: 10, //刻度标签与轴线之间的距离。
            interval: 0,
          },
        },
        yAxis: {
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgb(212,234,239)',
              type: 'solid'
            }
          },
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            color: 'black',
            formatter: function (value) {
              return value;
            }
          }
        },
        series: [{
          type: 'pictorialBar',
          symbolSize: [15, 7.5],
          symbolOffset: [0, -3.75],
          z: 12,
          symbolPosition: 'end',
          itemStyle: {
            color: 'rgb(86,224,225)',
          },
          data: this.data2,
        }, {
          type: 'pictorialBar',
          symbolSize: [15, 7.5],
          symbolOffset: [0, 3.75],
          z: 12,
          itemStyle: {
            color: 'rgb(126,154,227)',
          },
          data: this.data2,
        }, {
          type: 'bar',
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: 'rgba(161,180,224,.8)' }, { offset: 1, color: 'rgba(70,177,252,.8)' }])
          },
          barWidth: 15,
          data: this.data2,
          label: {
            show: true,
            position: 'top',
            formatter: '{c}', // 显示柱状图数据
            fontSize: 12,
            color: 'rgb(39,96,152)',
          },
        }]
      };
      myRightChart.setOption(option)
    },
    changeBtnValue(index) {
      this.btnValue.fill(false)
      this.btnValue.splice(index, 1, true)
    },
    async getToken() {
      let result = await reqGetToken()
      if (result.code === 200) {
        localStorage.setItem('cjsspToken', JSON.stringify(result.data))
      }
    },
    async getItemCardData(year) {
      if (localStorage.getItem('cjsspToken') == null) {
        await this.getToken()
      }
      let result = await reqGetRightTopData(year)
      if (result.code === 200) {
        this.itemCardData[0].number = result.data.ljfwxm
        this.itemCardData[1].number = result.data.ljbjl
        this.itemCardData[2].number = result.data.fwgyyd
        this.itemCardData[3].number = result.data.xzgycf
        this.itemCardData[4].number = result.data.ystsccf
        this.targetCardData[0].content[0].number = result.data.zdywzb.ydz.num
        this.targetCardData[0].content[1].number = result.data.zdywzb.ydz.area
        this.targetCardData[1].content[0].number = result.data.zdywzb.jgz.num
        this.targetCardData[1].content[1].number = result.data.zdywzb.jgz.area
        this.targetCardData[2].content[0].number = 41
        this.targetCardData[2].content[1].number = 2345
        this.targetCardData[3].content[0].number = result.data.zdywzb.hpjpw.num
        this.targetCardData[3].content[1].number = result.data.zdywzb.hpjpw.area
        this.targetCardData[4].content[0].number = result.data.zdywzb.sgxkz.num
        this.targetCardData[4].content[1].number = result.data.zdywzb.sgxkz.area
        this.targetCardData[5].content[0].number = result.data.zdywzb.jgys.num
        this.targetCardData[5].content[1].number = result.data.zdywzb.jgys.area
      }
    },
    async getRightCenterData() {
      if (localStorage.getItem('cjsspToken') == null) {
        await this.getToken()
      }
      let result = await reqGetRightCenterData()
      if (result.code === 200) {
        this.data1.splice(0, 5, ...(result.data.xmlqs.slice(-5).map(item => item.value)))
        this.data2.splice(0, 5, ...(result.data.jslqs.slice(-5).map(item => item.value)))
        this.xData.splice(0, 5, ...(result.data.jslqs.slice(-5).map(item => item.name + '年')))
      }
      this.initCenterRightCharts()
      this.initCenterLeftCharts()
    },
    async getRightBottomData(year){
      if (localStorage.getItem('cjsspToken') == null) {
        await this.getToken()
      }
      let result = await reqGetRightBottomData(year)
      if(result.code===200){
        this.chanYeData.splice(0,5,...result.data.cylb.slice(0,5))
        this.jingJiData.splice(0,5,...result.data.jjxy.slice(0,5))
        this.touZiData.splice(0,5,...result.data.tzqy.slice(0,5))
        // this.touZiData.splice(0,this.touZiData.length)
        // this.touZiData.push(...result.data.tzqy)
        this.jingJiSum = result.data.xmtzgm
        // this.enterpriseNumber = result.data.tzqy.reduce((acc, cur) => acc + parseInt(cur.value.split('/')[0]), 0)
        this.enterpriseNumber = result.data.tzqynum
      }
      // 重新加载charts
      this.reloadCharts(this.btnValue.indexOf(true))
    },
    setBtn(singal,content){
      if(singal===1){
        this.topBtnContent = content
      }else if(singal===2){
        this.bottomBtnContent = content
      }
    },
    reloadCharts(index){
      this.btnValue.splice(index, 1, false)
      this.$nextTick(()=>{
        this.btnValue.splice(index, 1, true)
      })
    }
  },
  mounted() {
    this.initCenterLeftCharts()
    this.initCenterRightCharts()
    this.getRightCenterData()
    this.getRightBottomData()
  },
  beforeMount() {
    this.getItemCardData()
  }
}
</script>

<style scoped></style>